<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <head>
        <meta charset="UTF-8"/>
        <title>重庆中交运维监控系统</title>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <!-- end: Mobile Specific -->
        <link th:href="@{css/bootstrap.min.css}" rel="stylesheet"/>
        <link th:href="@{css/bootstrap-responsive.min.css}" rel="stylesheet"/>
        <link th:href="@{css/style.min.css}" rel="stylesheet"/>
        <link th:href="@{css/style-responsive.min.css}" rel="stylesheet"/>
        <link th:href="@{css/font-awesome.min.css}" rel="stylesheet"/>
        <link th:href="@{css/bootstrap-table.min.css}" rel="stylesheet"/>
        <script th:src="@{js/jquery.min.js}"></script>
        <script th:src="@{js/bootstrap-table.min.js}"></script>
        <script th:src="@{js/bootstrap-table-locale-all.min.js}"></script>
        <script th:src="@{js/bootstrap.min.js}"></script>
        <script th:src="@{js/common.js}"></script>
    </head>
    <title>服务器管理</title>
    <style>
        .form-horizontal .controls {
            margin-left: 20px;
        }

        .right {
            float: right;
        }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>

<body>
<!--头部-->
<!-- start: Header -->
<div class="navbar">
    <div class="navbar-inner">
        <div class="container-fluid">
            <a class="btn btn-navbar" data-toggle="collapse"
               data-target=".top-nav.nav-collapse,.sidebar-nav.nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a id="main-menu-toggle" class="hidden-phone open"><i class="icon-reorder"></i></a>
            <div class="row-fluid">
                <a class="brand span2" target="_blank" href="https://www.cttic.cn/"
                   style="height:100%;"><span>重庆中交通信</span></a>
            </div>
            <!-- start: Header Menu -->
            <div class="nav-no-collapse header-nav">
                <ul class="nav pull-right">

                    <!---->
                    <li class="dropdown">
                        <a class="btn account dropdown-toggle" data-toggle="dropdown" href="#">
                            <div class="avatar">
                                <img src="images/1485075852959.jpg" alt="Avatar"/>
                            </div>
                            <div class="user">
                                <span class="hello">Welcome!</span>
                                <span class="name" id="login_right_phone"></span>
                            </div>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="dropdown-menu-title"></li>
                            <!--<li><a href="#"><i class="icon-user"></i> 个人信息</a></li>-->
                            <li><a href="/loginout.html"><i class="icon-off"></i> 退出登录</a></li>
                        </ul>
                    </li>
                    <!-- end: User Dropdown -->
                </ul>
            </div>
            <!-- end: Header Menu -->
        </div>
    </div>
</div>
<!-- start: Header -->
<div class="container-fluid-full">
    <div class="row-fluid">
        <!--左侧菜单/-->
        <!-- start: Main Menu -->
        <div id="sidebar-left" class="span2" ontablet="span2" ondesktop="span2">
            <div class="nav-collapse sidebar-nav" style="height: auto !important;">
                <ul class="nav nav-tabs nav-stacked main-menu">
                    <li>
                        <a class="dropmenu" href="javascript:void(0);"><span>监控管理</span></a>
                        <ul style="display: block;">
                            <li><a class="submenu" href="server-group-list"><span>系统管理</span></a></li>
                            <li class="active"><a class="submenu" href="server-list"><span>服务器管理</span></a></li>
                            <li><a class="submenu" href="error-log-list"><span>错误日志</span></a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <!-- end: Main Menu -->
        <!-- start: Content -->

        <div id="content" class="span10">
            <div class="row-fluid">
                <div class="box span12">
                    <div class="box-content" style="display: block;">
                        <button class="btn btn-yellow btn-xs" data-toggle="modal" data-target="#addserver"
                                onclick="popAddPage()">添加服务
                        </button>
                        <table class="table table-striped table-bordered table-hover" id="serverTable">
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- end: Content -->
    </div>
    <footer>
        <p>
            <span style="text-align:left;">Copyright &copy; 2014-2018 重庆中交通信  All rights reserved.</span>
        </p>
    </footer>
</div>

<!--增加服务模块弹窗 -->
<div class="modal fade" id="addserver" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="gridSystemModalLabel">添加服务</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <form class="form-horizontal">

                        <div class="form-group" style="padding-top: 10px;">
                            <label class="col-xs-3 control-label">服务名称：</label>
                            <div class="col-xs-6 ">
                                <input type="text" name="name" class="form-control input-sm duiqi"
                                       id="name"
                                       placeholder=""/>
                            </div>
                        </div>

                        <div class="form-group" style="margin-top: 10px;margin-bottom: 10px;">
                            <label class="col-xs-3 control-label">ip地址：</label>
                            <div class="col-xs-6 ">
                                <input type="text" name="ip" class="form-control input-sm duiqi"
                                       id="ip"
                                       placeholder=""/>
                            </div>
                        </div>

                        <div class="form-group ">
                            <label class="col-xs-3 control-label">端口号：</label>
                            <div class="col-xs-6 ">
                                <input type="text" name="groupName" class="form-control input-sm duiqi"
                                       id="port"
                                       placeholder=""/>
                            </div>
                        </div>


                        <div class="form-group" style="margin-top: 10px;margin-bottom: 10px;">
                            <label class="col-xs-3 control-label">系统名称：</label>
                            <div class="col-xs-6 ">
                                <select class="form-control" id="selectGroup">
                                </select>
                            </div>

                        </div>

                        <div class="form-group">
                            <label class="col-xs-3 control-label">备注：</label>
                            <div class="col-xs-6 ">
                                                <textarea class="form-control input-sm duiqi" name="remark"
                                                          id="remark"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-xs btn-white" data-dismiss="modal" id="cancle">取
                    消
                </button>
                <button type="button" class="btn btn-xs btn-green" id="" onclick="saveServer()">
                    保 存
                </button>
            </div>
        </div>
    </div>
</div>

<!--修改服务模块弹窗 -->
<div class="modal fade" id="changeserver" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="gridSystemModalLabel">编辑服务</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <form class="form-horizontal">
                        <input type="hidden" name="id" id="id" value=""/>
                        <input type="hidden" name="isStart" id="isStart" value=""/>
                        <div class="form-group" style="padding-top: 10px;">
                            <label class="col-xs-3 control-label">服务名称：</label>
                            <div class="col-xs-6 ">
                                <input type="text" name="name" class="form-control input-sm duiqi"
                                       id="uname"
                                       placeholder=""/>
                            </div>
                        </div>

                        <div class="form-group" style="margin-top: 10px;margin-bottom: 10px;">
                            <label class="col-xs-3 control-label">ip地址：</label>
                            <div class="col-xs-6 ">
                                <input type="text" name="groupName" class="form-control input-sm duiqi"
                                       id="uip"
                                       placeholder=""/>
                            </div>
                        </div>

                        <div class="form-group ">
                            <label class="col-xs-3 control-label">端口号：</label>
                            <div class="col-xs-6 ">
                                <input type="text" name="groupName" class="form-control input-sm duiqi"
                                       id="uport"
                                       placeholder=""/>
                            </div>
                        </div>


                        <div class="form-group ">
                            <label class="col-xs-3 control-label">系统名称：</label>
                            <div class="form-group" style="margin-top: 10px;margin-bottom: 10px;">
                                <select class="form-control" id="uselectGroup">
                                    <!--<option th:each="serverGroup,stat:${serverGroupList}" th:value="${serverGroup.id}"-->
                                    <!--th:text="${serverGroup.name }"></option>-->
                                </select>
                            </div>

                        </div>

                        <div class="form-group">
                            <label class="col-xs-3 control-label">备注：</label>
                            <div class="col-xs-6 ">
                                                <textarea class="form-control input-sm duiqi" name="remark"
                                                          id="uremark"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-xs btn-white" data-dismiss="modal" id="">取
                    消
                </button>
                <button type="button" class="btn btn-xs btn-green" id="saveGroup" onclick="submitUpdate()">
                    保 存
                </button>
            </div>
        </div>
    </div>
</div>

<!--删除提示-->
<div class="modal fade" id="deleteserver" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    确定要删除该用户？删除后不可恢复！
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-xs btn-white" data-dismiss="modal" id="dcancle">取 消</button>
                <button type="button" class="btn  btn-xs btn-danger" onclick="submitDelete()">确 定</button>
            </div>
        </div>
    </div>
</div>

<!--停止 启动提示-->
<div class="modal fade" id="isStartServer" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid" id="popInfo">

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-xs btn-white" data-dismiss="modal" id="dcancle">取 消</button>
                <button type="button" class="btn  btn-xs btn-danger" onclick="submitStartOrStop()">确 定</button>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $(function () {
        //左侧菜单下拉效果
        $('.dropmenu').click(function () {
            var $ul = $(this).siblings('ul');
            if ($ul.is(':visible')) {
                $(this).siblings('ul').hide(500);
            } else {
                $(this).siblings('ul').show(500);
            }
        });
        //控制高度2
        var wh = $(window).height() - 90;
        $('#content').css('min-height', wh);
        //左侧菜单隐藏
        $('.icon-reorder').click(function () {
            if ($('#sidebar-left').is(':visible')) {
                $('#sidebar-left').hide();
                $('#content').addClass('full');
                $('#main-menu-toggle').addClass('close');
                $('.brand').addClass('noBg');
            } else {
                $('#sidebar-left').show();
                $('#content').removeClass('full');
                $('#main-menu-toggle').removeClass('close');
                $('.brand').removeClass('noBg');
            }

        });
    });
</script>

<script>
    function saveServer() {
        var name = $('#name').val();
        var ip = $('#ip').val();
        var port = $('#port').val();
        var groupId = $('#selectGroup').val();
        var groupName = $("#selectGroup").find("option:selected").text()
        var remark = $('#remark').val();

        if (name == null || name == '') {
            alert("服务名不能为空！");
            return;
        }
        if (ip == null || ip == '') {
            alert("ip地址不能为空！");
            return;
        }
        if (port == null || port == '') {
            alert("地址端口号不能为空！");
            return;
        }
        if (groupName == null || groupName == '') {
            alert("系统名称不能为空！");
            return;
        }
        $.ajax({
            type: "post",
            url: '/create-server',
            data: {'name': name, 'ip': ip, 'port': port, 'remark': remark, 'groupName': groupName, 'groupId': groupId},
            success: function (data) {
                $('#cancle').modal('hide')
                alert("添加成功！")
                location.href = "/server-list";
            },
            error: function (error) {
                alert("添加失败！")
            }
        });
    }


    function submitUpdate() {
        var name = $('#uname').val();
        var remark = $('#uremark').val();
        var ip = $('#uip').val();
        var port = $('#uport').val();
        var groupName = $("#uselectGroup").find("option:selected").text();  //获取Select选择的Text
        var groupId = $("#uselectGroup").val();  //获取Select选择的Value
        var id = $('#id').val();

        if (name == null || name == '') {
            alert("服务名不能为空！");
            return;
        }
        if (ip == null || ip == '') {
            alert("ip地址不能为空！");
            return;
        }
        if (port == null || port == '') {
            alert("地址端口号不能为空！");
            return;
        }
        if (groupName == null || groupName == '') {
            alert("系统名称不能为空！");
            return;
        }

        $.ajax({
            type: "post",
            url: '/update-server',
            data: {
                'name': name,
                'remark': remark,
                'ip': ip,
                'id': id,
                'port': port,
                'groupName': groupName,
                'groupId': groupId
            },
            success: function (data) {
                $('#changeserver').modal('hide')
                alert("编辑成功！")
                location.href = "/server-list";
            },
            error: function (error) {
                alert("编辑失败！")
            }
        });
    }

    //delete
    function popDeletePage(id) {
        $('#deleteserver').on('show', function () {
            $('#id').val(id);
        })
    }

    function submitDelete() {
        var id = $('#id').val();
        $.ajax({
            type: "get",
            url: '/delete-server?id=' + id,
            success: function (data) {
                $('#deleteserver').modal('hide')
                alert("删除成功！")
                location.href = "/server-list";
            },
            error: function (error) {
                alert("删除失败！")
            }
        });
    }

    //启动or停止
    function isStart(id, flag) {
        $('#isStartServer').on('show', function () {
            $('#id').val(id);
            $('#isStart').val(flag);
            var temp = '停止';
            if (flag == 0) {
                temp = '停止';
            } else {
                temp = '启动';
            }
            var info = "确定要" + temp + "该服务器？";
            $('#popInfo').html(info);
        })
    }

    function submitStartOrStop() {
        var id = $('#id').val();
        var isStart = $('#isStart').val();
        $.ajax({
            type: "post",
            url: '/update-server',
            data: {
                'id': id,
                'isStart': isStart
            },
            success: function (data) {
                $('#isStartServer').modal('hide')
                alert("操作成功！")
                location.href = "/server-list";
            },
            error: function (error) {
                alert("操作失败！")
            }
        });

    }
</script>


<script type="text/javascript">
    //---先销毁表格 ---
    $('#serverTable').bootstrapTable('destroy');
    //---初始化表格,动态从服务器加载数据---
    $('#serverTable').bootstrapTable({
        //【发出请求的基础信息】
        url: '/server-list1',
        method: 'post',
        contentType: "application/x-www-form-urlencoded",
        //【其它设置】
        locale: 'zh-CN',//中文支持
        pagination: true,//是否开启分页（*）
        pageNumber: 1,//初始化加载第一页，默认第一页
        pageSize: 10,//每页的记录行数（*）
        pageList: [20, 30, 40],//可供选择的每页的行数（*）
        sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
        showRefresh: true,//刷新按钮
        search: true,//是否显示表格搜索，此搜索是客户端搜索，不会进服务端
        //【设置列】
        columns: [
            {
                field: 'num', title: '序号',
                formatter: function (value, row, index) {
                    return index + 1;
                }
            },
            {field: 'groupName', title: '系统名称'},
            {field: 'name', title: '服务名'},
            {field: 'ip', title: 'ip地址'},
            {field: 'port', title: '端口号'},
            {field: 'remark', title: '备注'},
            {
                field: 'isStart', title: '是否监控', align: 'center',
                formatter: function (value, row, index) {
                    var element = '';
                    if (row.isStart == '1') {
                        element = '<button class="btn btn-success btn-xs" data-toggle="modal" data-target="#isStartServer" onclick="isStart(\'' + row.id + '\',0)">停止</button>';
                    } else {
                        element = '<button class="btn btn-success btn-xs" data-toggle="modal" data-target="#isStartServer" onclick="isStart(\'' + row.id + '\',1)">启动</button>';
                    }
                    return element;
                }
            },
            {
                field: 'tool', title: '操作', align: 'center',
                formatter: function (value, row, index) {
                    var element = '<button class="btn btn-success btn-xs" data-toggle="modal" data-target="#changeserver" onclick="popUpdatePage(\'' + row.id + '\',\'' + row.name + '\',\'' + row.remark + '\',\'' + row.ip + '\',\'' + row.port + '\',\'' + row.groupId + '\')">修改</button>' +
                        '<button class="btn btn-success btn-xs" data-toggle="modal" data-target="#deleteserver" onclick="popDeletePage(\'' + row.id + '\')">删除</button>';
                    return element;
                }
            }
        ]
    })
</script>
</html>